<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用EventsBus实现组件通信</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/homeWork5.css">
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="root" class="box">
        <!-- 父亲部分 -->
        <dad></dad>
        <!-- 女儿部分 -->
        <daughter class="box_sub"></daughter>
        <!-- 儿子部分 -->
        <son class="box_sub"></son>
    </div>
    <script>
        //创建EventsBus对象
        const emitter=window.mitt();
        const app=Vue.createApp({
            components:{
                //父组件
                'dad':{
                    data(){
                        return{
                            event1_data:"",
                        }
                    },
                    //把父组件中的$emit事件放在mounted钩子函数中 等待子组件创建并注册$on事件后再去触发$emit
                    mounted(){
                        emitter.on("event1",e=>{
                            this.event1_data=e;
                        })
                    },
                    methods:{
                        send(){
                            //父组件c1触发“事件总线”的事件event1，并以此发送数据
                            emitter.emit("event2","佩奇、乔治回家吃饭啦");
                        }
                    },
                    template:`<div>
                            <div class="peiqi_title">
                                <img src="img/zhubaba.png" >
                                <h1>Hello 我是猪爸爸</h1>
                            </div>
                            <div class="contro">
                                <p>我们是四口之家，我家有一个可爱的女儿和淘气的儿子，我的女儿叫佩奇、儿子叫乔治，乔治不喜欢吃蔬菜，最喜欢的东西是巧克力蛋糕和恐龙。
                                   我们一家人全部都喜欢的事情，就是穿上各自的靴子，在泥坑里跳来跳去！
                                </p>
                            </div>
                                 <h2>猪爸爸这里收到佩奇可爱照片<img :src="event1_data" ></h2>
                                 
                                 <div class="txt">给佩奇和乔治发送消息<button @click="send">点击发送</button></div>
                            </div>`
                },
                //子组件1
                'daughter':{
                    data(){
                        return{
                            event2_data:"",
                        }
                    },
                    //把子组件中的$emit事件放在mounted钩子函数中 等待父组件及兄弟组件创建并注册$on事件后再去触发$emit
                    mounted(){
                        emitter.on("event2",e=>{
                            this.event2_data=e;
                        })
                    },
                    methods:{
                        sendMessage(){
                            //子组件c1触发“事件总线”的事件event1，并以此发送数据
                            emitter.emit("event1","img/peiqi_family.jpeg");
                        }
                    },
                    template:`<div>
                            <div class="peiqi_title">
                                 <img src="img/peiqi.png" >
                                 <h1>Hello 我是小猪佩奇</h1>
                            </div>
                                 <div class="txt">给猪爸爸和乔治发送我的照片<button @click="sendMessage">点击发送</button></div>
                                 <h3>佩奇收到爸爸消息：<span>{{event2_data}}<span></h3>
                            </div>`
                },
                //子组件2
                'son':{
                    data(){
                        return{
                            event1_data1:"",
                            event2_data2:""
                        }
                    },
                    mounted(){
                        emitter.on("event1",e=>{
                            this.event1_data1=e;
                        });
                        emitter.on("event2",e=>{
                            this.event2_data2=e;
                        })
                    },
                    template:`<div>
                            <div class="peiqi_title">
                                <img src="img/qiaozhi.png" >
                                <h1>Hello 我是乔治</h1>
                            </div>
                                 <h2>乔治这里收到佩奇姐姐照片<img :src="event1_data1" ></h2>
                                 <h3>乔治收到爸爸消息：<span>{{event2_data2}}</span></h3>
                            </div>`
                }
            }
    });
    const vm=app.mount("#root")
    </script>
    
</body>
</html>